<template>
  <view class="word-wrapper">
    <view class="word-title">预习单词，并尝试朗读</view>
    <view class="word">{{ props.preview?.word }}</view>
    <view class="word-translated">
      <text class="translated">
        美
        <template v-if="props.preview?.us_pron">
          [{{ props.preview.us_pron }}]
        </template>
      </text>
      <loudspeaker class="loudspeaker" isAutoPlay :voice="props.preview?.us_voice"></loudspeaker>
    </view>
    <view class="word-line"></view>
    <text class="translate">{{ props.preview?.translate }}</text>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import env from "@/config/env";
import loudspeaker from "@/components/loudspeaker.vue";
import type { IPreview } from "@/pages/lowPricedCourse/dialogueOriginText/index";

interface IProps {
  preview: IPreview
}

const props = defineProps<IProps>();
</script>

<style scoped lang="scss">
@import "./dialogue.scss";
</style>